<template>
  <view class="resume-manage-container">
    <!-- 固定顶部区域 -->
    <view class="fixed-header">
      <!-- 顶部导航 -->
      <view class="header">
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back.png"></image>
        </view>
        <text class="page-title">简历管理</text>
      </view>

      <!-- 筛选状态标签 -->
      <view class="status-filter-card">
        <view class="filter-container">
          <view
            v-for="(tab, index) in statusTabs"
            :key="index"
            :class="['filter-item', { active: currentStatus === tab.value }]"
            @click="selectStatus(tab.value)"
          >
            <text class="filter-label">{{ tab.label }}</text>
            <text class="filter-count" v-if="tab.count !== undefined">({{ tab.count }})</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <view class="scrollable-content">
      <scroll-view scroll-y class="resume-list-scroll">
        <view class="resume-card" v-for="resume in filteredResumes" :key="resume.id">
          <view class="card-inner-padding">
            <view class="candidate-header">
              <view class="candidate-avatar-placeholder">
                <text class="avatar-text-top">面试</text>
                <text class="avatar-text-bottom">{{ resume.jobTypeDisplay }}</text>
              </view>
              <view class="candidate-main-info">
                <view class="name-tag-row">
                  <text class="nickname">{{ resume.nickname }}</text>
                  <text :class="['status-tag', resume.statusClass]">{{ resume.statusLabel }}</text>
                </view>
                <text class="job-name">{{ resume.jobName }}</text>
              </view>
            </view>
            <view class="candidate-details-row">
              <text class="detail-item">{{ resume.experience }}年经验</text>
              <text class="detail-separator">|</text>
              <text class="detail-item salary">{{ resume.degree }}</text>
              <text class="detail-separator">|</text>
              <text class="detail-item salary">{{ resume.salary }}</text>
            </view>
            <view class="card-bottom-row">
              <text class="apply-date">{{ resume.applyDate }}</text>
              <view class="action-buttons">
                <button class="action-btn contact-btn">联系</button>
                <button class="action-btn view-resume-btn">查看简历</button>
              </view>
            </view>
          </view>
        </view>
        <view v-if="filteredResumes.length === 0" class="empty-state">
          <image class="empty-icon" src="/static/empty.png"></image>
          <text class="empty-text">暂无简历</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStatus: 'all',
      statusTabs: [
        { label: '全部', value: 'all', count: 0 },
        { label: '待查看', value: 'pending', count: 0 },
        { label: '已约面', value: 'interviewed', count: 0 },
        { label: '不合适', value: 'unsuitable', count: 0 },
        { label: '待定', value: 'on_hold', count: 0 },
      ],
      resumes: [
        {
          id: '1',
          nickname: '张三',
          experience: 3,
          degree: '本科',
          jobType: '全职',
          jobName: '前端开发工程师',
          status: 'pending',
          statusLabel: '新投递',
          statusClass: 'pending',
          salary: '12k-18k',
          applyDate: '2024-01-15 14:30',
          jobTypeDisplay: 'FullTime'
        },
        {
          id: '2',
          nickname: '李四',
          experience: 5,
          degree: '硕士',
          jobType: '实习',
          jobName: '产品经理',
          status: 'viewed',
          statusLabel: '已查看',
          statusClass: 'viewed',
          salary: '10k-15k',
          applyDate: '2024-01-14 10:00',
          jobTypeDisplay: 'Intern'
        },
        {
          id: '3',
          nickname: '王五',
          experience: 8,
          degree: '博士',
          jobType: '全职',
          jobName: '算法工程师',
          status: 'interviewed',
          statusLabel: '已约面',
          statusClass: 'interviewed',
          salary: '20k-30k',
          applyDate: '2024-01-13 09:30',
          jobTypeDisplay: 'FullTime'
        },
        {
          id: '4',
          nickname: '赵六',
          experience: 2,
          degree: '本科',
          jobType: '全职',
          jobName: '前端开发工程师',
          status: 'unsuitable',
          statusLabel: '不合适',
          statusClass: 'unsuitable',
          salary: '8k-12k',
          applyDate: '2024-01-12 16:00',
          jobTypeDisplay: 'FullTime'
        },
        {
          id: '5',
          nickname: '孙七',
          experience: 4,
          degree: '硕士',
          jobType: '实习',
          jobName: '数据分隔线析师',
          status: 'pending',
          statusLabel: '新投递',
          statusClass: 'pending',
          salary: '6k-10k',
          applyDate: '2024-01-11 11:45',
          jobTypeDisplay: 'Intern'
        },
        {
          id: '7',
          nickname: '吴老八',
          experience: 6,
          degree: '本科',
          jobType: '全职',
          jobName: '市场运营',
          status: 'unsuitable',
          statusLabel: '不合适',
          statusClass: 'unsuitable',
          salary: '8k-13k',
          applyDate: '2024-01-09 09:00',
          jobTypeDisplay: 'FullTime'
        },
        {
          id: '8',
          nickname: '郑小九',
          experience: 2,
          degree: '大专',
          jobType: '实习',
          jobName: '销售助理',
          status: 'on_hold',
          statusLabel: '待定',
          statusClass: 'on-hold',
          salary: '4k-6k',
          applyDate: '2024-01-08 17:00',
          jobTypeDisplay: 'Intern'
        },
        {
          id: '6',
          nickname: '周八',
          experience: 1,
          degree: '本科',
          jobType: '全职',
          jobName: 'UI设计师',
          status: 'on_hold',
          statusLabel: '待定',
          statusClass: 'on-hold',
          salary: '7k-11k',
          applyDate: '2024-01-10 15:30',
          jobTypeDisplay: 'FullTime'
        }
      ]
    }
  },
  computed: {
    filteredResumes() {
      if (this.currentStatus === 'all') {
        return this.resumes
      } else {
        return this.resumes.filter(resume => resume.status === this.currentStatus)
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    selectStatus(status) {
      this.currentStatus = status;
    },
    updateStatusCounts() {
      const counts = {
        all: this.resumes.length,
        pending: 0,
        interviewed: 0,
        unsuitable: 0,
        on_hold: 0,
      };
      this.resumes.forEach(resume => {
        if (counts[resume.status] !== undefined) {
          counts[resume.status]++;
        }
      });
      this.statusTabs = this.statusTabs.map(tab => ({
        ...tab,
        count: counts[tab.value] || 0,
      }));
    }
  },
  created() {
    this.updateStatusCounts();
  },
  watch: {
    resumes: {
      handler() {
        this.updateStatusCounts();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped>
.resume-manage-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow-x: hidden;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
}

.scrollable-content {
  flex: 1;
  margin-top: 320rpx; /* 为固定头部留出充足空间 */
  position: relative;
  background: transparent;
  z-index: 10;
}

.resume-manage-container::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 120rpx 120rpx;
  opacity: 0.3;
  z-index: 1;
  animation: backgroundMove 25s linear infinite;
}

/* 为固定头部添加阴影分隔线效果 */
.fixed-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10rpx;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, transparent 100%);
  z-index: 1;
}

@keyframes backgroundMove {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  33% { transform: translateX(60rpx) translateY(-40rpx) rotate(120deg); }
  66% { transform: translateX(-40rpx) translateY(60rpx) rotate(240deg); }
  100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

@keyframes headerShimmer {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes headerSweep {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* 页面进入动画 */
@keyframes pageEnter {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardSlideUp {
  0% {
    opacity: 0;
    transform: translateY(40rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 为主要元素添加进入动画 */
.status-filter-card {
  animation: cardSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.resume-card {
  animation: cardSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.resume-card:nth-child(1) { animation-delay: 0.1s; }
.resume-card:nth-child(2) { animation-delay: 0.2s; }
.resume-card:nth-child(3) { animation-delay: 0.3s; }
.resume-card:nth-child(4) { animation-delay: 0.4s; }
.resume-card:nth-child(5) { animation-delay: 0.5s; }

/* 按钮悬停效果增强 */
.action-btn:hover {
  transform: translateY(-3rpx);
  box-shadow:
    0 10rpx 30rpx rgba(5, 162, 115, 0.12),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
}

/* 卡片悬停时按钮效果 */
.resume-card:hover .action-btn {
  box-shadow:
    0 8rpx 20rpx rgba(5, 162, 115, 0.1),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  backdrop-filter: blur(20rpx);
  border: 2rpx solid rgba(16, 185, 129, 0.2);
  box-shadow:
    0 8rpx 20rpx rgba(0, 0, 0, 0.15),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.back-button:active {
  transform: scale(0.9) translateY(2rpx);
  background: rgba(16, 185, 129, 0.25);
  box-shadow:
    0 4rpx 12rpx rgba(0, 0, 0, 0.2),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.2);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.status-filter-card {
  background: #ffffff;
  margin: 24rpx;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #e2e8f0;
  padding: 24rpx;
  position: relative;
  z-index: 5;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.status-filter-card::-webkit-scrollbar {
  display: none;
}

.filter-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16rpx;
  min-width: max-content;
  padding-right: 40rpx;
}

.filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #64748b;
  font-weight: 500;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: 20rpx;
  margin: 0;
  min-width: 120rpx;
  white-space: nowrap;
}

.filter-item:hover {
  background: rgba(5, 162, 115, 0.08);
  transform: translateY(-2rpx);
}

.filter-item.active {
  color: #333333;
  font-weight: 700;
  background: rgba(5, 162, 115, 0.1);
  box-shadow: 0 4rpx 12rpx rgba(5, 162, 115, 0.15);
}

.filter-item.active::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  width: 70%;
  height: 4rpx;
  background: linear-gradient(135deg, #05A273 0%, #04C2A4 100%);
  border-radius: 2rpx;
  box-shadow: 0 2rpx 8rpx rgba(5, 162, 115, 0.3);
}

.filter-label {
  margin-right: 0;
  margin-bottom: 8rpx;
}

.filter-count {
  font-size: 28rpx;
  color: #999;
}

.filter-item.active .filter-count {
  color: #05a273;
}

.resume-list-scroll {
  height: calc(100vh - 320rpx);
  padding: 20rpx 0 24rpx;
}

.resume-card {
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 0;
  margin-bottom: 24rpx;
  margin-left: 24rpx;
  margin-right: 24rpx;
  border: 1rpx solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
  width: calc(100% - 48rpx);
  max-width: none;
}

.resume-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
}

/* 确保第一个简历卡片有足够的显示空间 */
.resume-card:first-child {
  margin-top: 8rpx;
}

.card-inner-padding {
  padding: 36rpx;
}

.candidate-header {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  position: relative;
}

.candidate-avatar-placeholder {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background: linear-gradient(135deg, #8b60ed 0%, #6a4aac 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: white;
  border: 2rpx solid #d4edda;
  box-shadow: 0 6rpx 12rpx rgba(139, 96, 237, 0.2);
}

.avatar-text-top {
  font-size: 24rpx;
  font-weight: 700;
  color: white;
  margin-bottom: 4rpx;
}

.avatar-text-bottom {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.candidate-main-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.name-tag-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8rpx;
}

.nickname {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
  margin-right: 12rpx;
}

.job-name {
  font-size: 28rpx;
  color: #666;
  margin-top: 4rpx;
}

.status-tag {
  position: relative;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.status-tag.pending {
  background-color: #fff3cd;
  color: #d4a700;
}

.status-tag.viewed {
  background-color: #e8f5e8;
  color: #28a745;
}

.status-tag.interviewed {
  background-color: #d1ecf1;
  color: #17a2b8;
}

.status-tag.unsuitable {
  background-color: #f8d7da;
  color: #dc3545;
}

.status-tag.on-hold {
  background-color: #e2e6ea;
  color: #6c757d;
}

.candidate-details-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16rpx;
}

.detail-item {
  font-size: 28rpx;
  color: #555;
  margin-right: 12rpx;
}

.detail-item.salary {
  color: #333333;
  font-weight: normal;
  margin-right: 0;
}

.detail-item.red-text {
  color: #ff4757;
}

.detail-separator {
  font-size: 28rpx;
  color: #ccc;
  margin-right: 12rpx;
}

.card-bottom-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1rpx solid #f0f0f0;
}

.apply-date {
  font-size: 26rpx;
  color: #999;
  align-self: flex-start;
}

.action-buttons {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}

.action-btn {
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  border-radius: 24rpx;
  border: 2rpx solid transparent;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140rpx;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 64rpx;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10rpx);
  box-shadow:
    0 6rpx 16rpx rgba(0, 0, 0, 0.08),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.2);
}

.contact-btn {
  background:
    linear-gradient(135deg, rgba(5, 162, 115, 0.08) 0%, rgba(5, 162, 115, 0.05) 100%),
    linear-gradient(135deg, #f1f3f4 0%, #e1e3e4 100%);
  color: #4a5568;
  border-color: rgba(5, 162, 115, 0.15);
}

.contact-btn:active {
  transform: scale(0.95) translateY(2rpx);
  box-shadow:
    0 3rpx 8rpx rgba(0, 0, 0, 0.12),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
}

.view-resume-btn {
  background: linear-gradient(135deg, #05a273 0%, #04c2a4 100%);
  color: white;
  border-color: rgba(5, 162, 115, 0.3);
  box-shadow:
    0 8rpx 25rpx rgba(5, 162, 115, 0.25),
    0 4rpx 12rpx rgba(5, 162, 115, 0.15),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.2);
}

.view-resume-btn:active {
  transform: scale(0.95) translateY(2rpx);
  box-shadow:
    0 4rpx 15rpx rgba(5, 162, 115, 0.3),
    0 2rpx 8rpx rgba(5, 162, 115, 0.2),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
}

.empty-state {
  text-align: center;
  padding: 140rpx 40rpx 100rpx;
  color: #64748b;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}

.empty-state::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200rpx;
  height: 200rpx;
  background:
    radial-gradient(circle, rgba(5, 162, 115, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.empty-icon {
  width: 140rpx;
  height: 140rpx;
  margin-bottom: 40rpx;
  opacity: 0.6;
  filter: drop-shadow(0 4rpx 12rpx rgba(5, 162, 115, 0.15));
}

.empty-text {
  font-size: 32rpx;
  color: #475569;
  font-weight: 500;
  margin-bottom: 12rpx;
}
</style>
